<template>
  <div class="status-overview">
    <el-row>
      <el-col :span="24">
        <dynForm
          :info-form="infoForm"
          :search-tags="searchTags"
          :select-list="selectList"
        >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t('search') }}</el-button>
        </dynForm>
      </el-col>
    </el-row>
    <el-card style="padding: 10px">
      <ul class="state-content" @click="handleClickState">
        <li
          v-for="(n, i) in statusList"
          :key="i"
          :class="[n.eqpStatus === eqpStatus ? 'activeLi' : '']"
        >
          <!-- mask 覆盖li标签获取状态 -->
          <div :data-title="`${n.eqpStatus}`" class="state-mask"/>
          <div class="state-title">
            <span class="state-clip-alt"/>
            <span
              :style="{background: `linear-gradient(45deg, transparent 21px, ${n.color} 0) bottom left`}"
              class="state-clip-path"
            >
              <span>{{ n.eqpStatus }}</span>
            </span>
          </div>
          <div class="state-num">
            <span>{{ n.count }}台</span>
          </div>
        </li>
      </ul>
      <el-divider/>
      <ul class="state-content" >
        <li
          v-for="(n, i) in eqpList"
          :key="i"
        >
          <div class="state-title">
            <span class="state-clip-alt"/>
            <span
              :style="{background: `linear-gradient(45deg, transparent 21px, ${stateColors[eqpStatus]} 0) bottom left`}"
              class="state-clip-path"
            >
              <span>{{ eqpStatus }}</span>
            </span>
          </div>
          <div class="state-time">
            <i class="el-icon-time" />
            <p class="time-des">
              <span class="time-des-duration">{{ n.duration }}</span>
              <span>状态持续时间</span>
            </p>
          </div>
        </li>
      </ul>
    </el-card>
  </div>
</template>
<script>
import bevelBox from './component/bevelBox.vue'
import { getList } from '@/api/OEE/statusOverview'
import { getEquipmentTypesList } from '@/api/production/layoutDesign'
import { getEqpModelList } from '@/api/equipment/eqpbase'
export default {
  name: 'StatusOverview',
  components: { bevelBox },
  data() {
    const searchTags = [
      // { label: this.$t('equipmentType'), prop: 'eqpType', tag: 'DynSelect' },
      // { label: this.$t('eqpModel'), prop: 'eqpModel', tag: 'DynSelect' },
      { label: this.$t('eqpName'), prop: 'eqpId', tag: 'DynInput' }
    ]
    return {
      infoForm: {},
      statusList: [],
      eqpList: [],
      eqpStatus: 'RUN',
      selectList: {},
      searchTags: Object.freeze(searchTags),
      stateColors: Object.freeze({
        'RUN': '#1AD175',
        'ALARM': '#EC4014',
        'IDLE': '#3F8EDD',
        'NETWORKFAILURE': '#959595',
        'STOP': '#FFDD20'
      })
    }
  },
  created() {
    this.initList()
    this.getEquipmentTypes()
    this.getEqpTypesList()
  },
  methods: {
    async initList() {
      const res = await getList({ ...this.infoForm, eqpStatus: this.eqpStatus })
      const { statusList, eqpList } = res.data
      this.statusList = statusList
      this.eqpList = eqpList
    },
    doSearch() {
      this.initList()
    },
    handleClickState(e) {
      // 防止出现字段闪现问题
      this.eqpList = []
      if (e.target.getAttribute('data-title')) {
        this.eqpStatus = e.target.getAttribute('data-title')
        this.initList()
      }
    },
    // 获取设备类型列表
    async getEquipmentTypes() {
      const res = await getEquipmentTypesList()
      this.$set(this.selectList, 'eqpType', res.data)
    },
    async getEqpTypesList() {
      const res = await getEqpModelList()
      this.$set(this.selectList, 'eqpModel', res.data)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-row:nth-child(1) {
  padding-bottom: 0;
}
::v-deep .el-form {
  padding-top: 10px;
  // .el-form-item {
  //   margin-bottom: 15px;
  // }
}
.status-overview{
  padding-bottom: 30px;
}
.state-content{
  list-style: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  li{
    min-width: 14%;
    height: 80px;
    background-color: #f8f8f8;
    margin-right: 20px;
    position: relative;
    .state-mask{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .state-title{
      height: 30px;
      width: 100%;
      display: flex;
        .state-clip-alt{
          display: block;
          flex: 3;
        }
        .state-clip-path{
          flex: 7;
          height: 100%;
          display: block;
          background-repeat: no-repeat;
          color: #fff;
          text-align: center;
          line-height: 30px;
          span{
            font-size: 14px;
            padding: 0 0 0 20px;
          }
        }
    }
    .state-num{
      height: calc(100% - 30px);
      font-size: 26px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      span{
        display: inline-block;
        padding: 0 0 4px 10px;
      }
    }
    .state-time{
      display: flex;
      align-items: center;
      padding: 0 10px;
      .el-icon-time{
        font-size: 18px;
        margin-right: 10px;
      }
      .time-des{
        display: flex;
        flex-direction: column;
        .time-des-duration{
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
  }
  .activeLi{
    border: 2px solid #ccc;
  }
    .state-info{
      padding-bottom: 6px;
      padding-left: 6px;
        .state-info-num{
          font-size: 26px;
        }
  }
}
.all-stateList{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
</style>
